<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            border: 1px solid #01f;
            color: #999;
        }


    </style>
</head>
<body>
    <input type="text" value="请输入用户名">
    <script>

        var input = document.getElementsByTagName('input')[0];

        input.oninput = function(e) {
            console.log(e);
            console.log(this.value);
        }
        //输入框内的内容有变化（监听用户输入）都会触发input事件

        input.onchange = function(e) {
            console.log(e);
            console.log(this.value);
            // 聚焦 + 发生改变 + 失去焦点后 才会触发
            // 对比的是聚焦后和失去焦点前的内容有没有发生改变
        }

        input.onfocus = function(e) {
            console.log(e);
            if(this.value == '请输入用户名'){
                this.value = "";
                this.style.color = "#424242";
            }
        }
        input.onblur = function(e) {
            console.log(e);
            if(this.value == ""){
                this.value = '请输入用户名';
                this.style.color = "#999";
            }
        }
    </script>
</body>
</html>